<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <title>行程详情</title>
        <link rel="stylesheet" href="__CDN__/qz/assets/frozenui-1.3.0/css/frozen.css">
        <link rel="stylesheet" type="text/css" href="__CDN__/qz/assets/css/style.css" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> 
    </head>

    <body>
        <div id="map" >
            调用地图api
        </div>
         <script type="text/javascript">
            var map = new BMap.Map("map"); // 创建Map实例
            map.centerAndZoom(new BMap.Point(116.403884,39.914887), 13);  
            map.enableScrollWheelZoom();  
            var marker=new BMap.Marker(new BMap.Point(116.403884,39.914887));  
            map.addOverlay(marker);  
            var licontent="<b>天安门</b><br>";  
            licontent+="<span><strong>地址：</strong>北京市东城区天安门广场北侧</span><br>";  
            licontent+="<span><strong>电话：</strong>(010)63095718,(010)63095630</span><br>"; 
            licontent+="<span class='input'>"+
                        "<strong></strong>"+
                        "<input class='outset' type='text' name='origin' value='北京站'/>"+
                        "<input class='outset-but' type='button' value='公交' onclick='gotobaidu(1)'/>"+
                        "<input class='outset-but' type='button' value='驾车' onclick='gotobaidu(2)'/>"+
                        "<a class='gotob' href='url=\"http://api.map.baidu.com/direction?destination=latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:天安门"+"®ion=北京"+"&output=html\' target='_blank'></a>" +
                        "</span>";
  
            var hiddeninput="<input type=\"hidden\" value=\""+'北京'+"\" name=\"region\" /><input type=\"hidden\" value=\"html\" name=\"output\" /><input type=\"hidden\" value=\"driving\" name=\"mode\" /><input type=\"hidden\" value=\"latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:天安门"+"\" name=\"destination\" />";
          
            var content1 ="<form id=\"gotobaiduform\" action=\"http://api.map.baidu.com/direction\" target=\"_blank\" method=\"get\">" + licontent +hiddeninput+"</form>";
           
            var opts1 = { width: 300 };  
                
            var  infoWindow = new BMap.InfoWindow(content1, opts1);  
            marker.openInfoWindow(infoWindow);  
            marker.addEventListener('click',function(){
                marker.openInfoWindow(infoWindow);
            });  
              
            function gotobaidu(type)  
            {  
                if($.trim($("input[name=origin]").val())=="")  
                {  
                    alert("请输入起点！");  
                    return;  
                }else{  
                    if(type==1)  
                    {  
                        $("input[name=mode]").val("transit");  
                        $("#gotobaiduform")[0].submit();  
                    }else if(type==2)  
                    {      
                        $("input[name=mode]").val("driving");          
                        $("#gotobaiduform")[0].submit();  
                    }  
                }  
            }    
        </script>
        {volist name="travel.schedule" id="vo" key="k"}
        <section>
            <div class="day1">
                <i class="round round1"></i>
                <span><b>Day 0{$k}</b></span>
                <span class="marginL39">{$key}</span>
                <span class="floatR"><img src="__CDN__/qz/assets/img/icon_map_27.png" class="icon_map"/></span>
            </div>
            {volist name="vo.activties" id="ac"}
            <div class="tap tap1 body">
                <div class="row2_">
                    <i class="mark">{$ac.category_abbr}</i>
                </div>
                <div class="row8_">
                    <h2>{$ac.pivot.begintime|date='H:i',###}-{$ac.pivot.endtime|date='H:i',###}</h2>
                    <p class="text_detail">{$ac.name}</p>
                    <p>
                        <span class="zhushi">距离下一站60kg</span>
                        <a href="javascript:;" class="click_page" id="click{$k}"><img src="__CDN__/qz/assets/img/icon_up_blue.png" /><span>收起</span></a>
                    </p>
                </div> 
                <div style="clear: left;"></div> 
                <div class="ban1 ban detail_ban{$k}">
                    <section class="marginT40">
                        <h4>活动流程</h4>
                        <div>
                            {$ac.course_plan}
                        </div>
                    </section>  
                    <section class="tripDescription marginT40">
                        <h4>活动描述</h4>
                        <div class="marginT20">
                            {$ac.desc}
                        </div>
                    </section>  
                    <section class="tripDescription marginT40">
                        <h4>费用包含</h4>
                        <div class="marginT20">
                            {$ac.include}
                        </div>
                    </section>
                    <section class="tripDescription marginT40 marginB25">
                        <h4>活动须知</h4>
                        <div class="marginT20">
                            {$ac.notes}
                        </div>
                    </section> 
                </div>
            </div>
            {/volist}
        {/volist}
        <section>
            <div class="day1 backgroundCT">
                <i class="round dayTop"></i>
                <span>THE END</span>
            </div>
        </section>
        {if $travel.other}
        <div class="tap body">
            {volist name="travel.other" id="o"}
            <div class="row2_">
                <img src="__CDN__/qz/assets/img/icon_weixuan.png" class="mark marginT4 width15" />
            </div>
            <div class="row8_">
                <h2>{$o.name}<span class="money_yi floatR">¥{$o.fee}</span></h2>
                <p class="marginT15">
                    <span class="zhushi">{$o.notes}</span>
                </p>
            </div> 
            <div style="clear: left;"></div> 
            {/volist} 
        </div>
        {/if}
        <div class="tap body say">
            <p class="">
                <span class="zhushi color969696">活动说明</span>
            </p>
            <p class="say_detail">{$travel.desc}</p>
        </div>
        {if $travel.signuplist}
        <div class="tap body say marginB70">
            <h2>报名名单</h2>
            <ul id="signUp" class="marginT15 marginB25">
                {volist name="travel.signuplist" id="u"}
                <li>
                    <img src="{$u.avatar}" />
                    <span>{$u.name}</span>
                    <span class="floatR">{$u.mobile}</span>
                </li>
                {/volist}
            </ul>
        </div>
        {/if}
        <footer class="footer">
            <a href="javascript:;" class="row2 textAC money_yi">票价：¥{$travel.memebr_price}</a>
            <a href="javascript:;" class="row2 textAC baomin">立刻报名</a>
        </footer>
        <script type="text/javascript" src="__CDN__/qz/assets/js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="__CDN__/qz/assets/js/script.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.click_page').each(function(i){
                    var index = i+1;
                    $("#click"+index).click(function(){
                        $(".detail_ban"+index).toggle();
                        console.log()
                        var showOrHide = $(".detail_ban"+index).css("display");
                        if(showOrHide=='none'){
                            $(this).find('span').text('展开');
                            $(this).find('img').addClass('rotate');
                        }else{
                            $(this).find('span').text('收起');
                            $(this).find('img').removeClass('rotate');
                        }
                        
                    });
                })
            });
        </script>
    </body>
</html>